<template>
    <div class="rank_list">
        <list-item
            v-for="item in list"
            :key="item.id"
            :image="createImageUrl(item.banner7url)"
            :name="item.rankname"
            :path="`/rank/info/${item.rankid}`"
        />
    </div>
</template>

<script>
import ListItem from 'Components/ListItem'
import { ref, onBeforeMount } from 'vue'
import { getRankListClassify } from 'Api/rank'
import { createImageUrl } from 'Utils/utils'
export default {
    name: 'RankList',
    components: {
        ListItem
    },
    setup () {
        const list = ref([])

        onBeforeMount(async () => {
            const data = await getRankListClassify()
            list.value = data.rank.list || []
        })

        return {
            list,
            createImageUrl
        }
    }
}
</script>
